@import '@/styles/color.scss';
// 系统暗黑样式 修改element样式 详情请看utils/changeSystemStyle.js
.style_black {
  .el-input-group__prepend {
    background: $black-bk;
    padding: 0 1px 0 10px;
    color: $font-color;
    position: relative;
    font-size: 12px;
    box-shadow: none;
  }
  .el-input-group__prepend::after {
    content: '';
    position: absolute;
    top: 1px;
    right: -1px;
    bottom: 1px;
    width: 2px;
    // background: $black-bk;
    z-index: 3;
  }
  .el-input-group--prepend > .el-input__inner:focus {
    box-shadow: none;
  }
  .el-input-group--prepend > .el-input__inner:hover {
    box-shadow: none;
  }
  input.el-input__inner::-webkit-input-placeholder {
    font-size: 12px;
    color: $font-color;
    opacity: 0.8;
  }
  input.el-input__inner {
    // background: $black-bk;
    color: $font-color;
    box-shadow: none;
  }
  .el-input {
    // padding: 0 10px;
    box-sizing: border-box;
  }
  /* 下拉选择框样式 */
  .el-input__wrapper {
    background: $black-bk;
    border: none !important;
    box-shadow: none;
  }
  .el-select:hover:not(.el-select--disabled) .el-input__wrapper {
    box-shadow: none;
  }
  .el-select .el-input.is-focus .el-input__wrapper {
    box-shadow: none !important;
  }
  .el-select .el-input.is-focus .el-input__inner {
    box-shadow: none !important;
  }
  .el-select .el-input__wrapper.is-focus {
    box-shadow: none !important;
  }
  .el-select .el-input__inner {
    touch-action: none;
  }
  .el-select .el-input__inner:focus,
  .el-select:hover:not(.el-select--disabled) .el-input__inner {
    box-shadow: none !important;
  }

  .el-select-group__wrap::after {
    background: $font-color !important;
    opacity: 0.9;
  }
  /* 下拉选择框弹窗样式*/
  $dropdown-bk: rgba(55, 69, 96, 0.8);
  $dropdown-border: none;
  $dropdown-shadown: 0px 1px 5px rgba(0, 0, 0, 0.3);
  $dropdown-bk-hover: #62708e;
  $dropdown-group-color: rgba(202, 209, 220, 0.9);
  .el-popper.is-light {
    background: $dropdown-bk !important;
    border: $dropdown-border !important;
    color: #fff;
  }
  .el-select-dropdown {
    background: $dropdown-bk !important;
    box-shadow: $dropdown-shadown;
  }
  .el-select-dropdown__item {
    color: $font-color;
    transition: all 0.3s;
  }
  .el-select-dropdown__item.selected {
    color: $font-color !important;
  }
  .el-select-dropdown__item.hover {
    background: $dropdown-bk-hover;
    color: $font-color;
  }
  .noLine {
    .el-select-group__title::before {
      display: none;
    }
  }
  .el-select-group__title {
    position: relative;
    padding-left: 28px;
    color: $dropdown-group-color;
    &::before {
      content: '';
      height: 14px;
      width: 2px;
      background: $dropdown-group-color;
      position: absolute;
      top: 8px;
      left: 18px;
      border-radius: 4px;
    }
  }

  .el-popper.is-light .el-popper__arrow::before {
    background: $dropdown-bk;
    border: $dropdown-border !important;
  }
  // 下拉菜单弹窗样式
  .el-dropdown-menu {
    background: $dropdown-bk !important;
  }
  .el-dropdown-menu__item {
    color: $font-color;
    transition: all 0.3s;
  }
  .el-menu-item:not(.el-menu-item.is-active):hover,
  .collapse-btn:hover,
  .dropdown-link:hover,
  .el-dropdown-menu__item:hover {
    background: $dropdown-bk-hover !important;
    color: $font-color;
  }
  .el-popper.is-light {
    box-shadow: $dropdown-shadown !important;
  }
  // 表单样式
  .el-table {
    background: transparent !important;
  }
  .el-table th {
    background-color: transparent !important;
  }
  .el-table tr {
    background-color: transparent !important;
    color: $font-color;
  }
  .el-table td.el-table__cell,
  .el-table th.el-table__cell.is-leaf {
    border-bottom: none;
  }
  .el-table--border .el-table__inner-wrapper::after,
  .el-table--border::after,
  .el-table--border::before,
  .el-table__inner-wrapper::before {
    background-color: transparent !important;
  }
  .el-table .cell {
    line-height: 20px !important;
  }
  .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
    background: #62708e;
  }
  .el-table-v2__main {
    background: transparent !important;
  }
  .el-table-v2__row {
    border: none !important;
    transition: all 0.3s;
  }
  .el-table-v2__row:hover {
    background: #62708e;
  }
  .el-table-v2__header-row {
    background: transparent !important;
    border: none;
  }
  .el-table-v2__header-cell {
    background: transparent !important;
    color: $font-color;
  }
  // 选择日期组件
  .el-picker-panel {
    background: rgba(55, 69, 96, 0.8);
    color: inherit;
  }
  .disabled .el-date-table-cell {
    background: transparent !important;
  }
  .el-date-picker__header-label {
    color: inherit;
  }
  .el-date-table th {
    color: inherit;
  }
  .el-picker-panel__icon-btn {
    color: $font-color;
  }
  .el-checkbox {
    color: $font-color;
  }
  .el-checkbox.el-checkbox--small .el-checkbox__inner {
    background: #fff;
  }
  .el-checkbox .el-checkbox__inner {
    background: #fff;
  }
  .el-checkbox__inner {
    background: #fff;
    border-color: #fff;
  }
  .el-checkbox__inner:hover {
    border-color: #fff;
  }
  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #333;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner {
    border-color: #fff;
    background-color: #fff;
  }
  .el-checkbox__inner::after {
    border: 1px solid #333;
    box-sizing: content-box;
    content: '';
    border-left: 0;
    border-top: 0;
    height: 7px;
    left: 4px;
    position: absolute;
    top: 1px;
    transform: rotate(45deg) scaleY(0);
    width: 3px;
    transition: transform 0.15s ease-in 50ms;
    transform-origin: center;
  }
  td {
    background: transparent !important;
  }
  .el-loading-mask {
    background: transparent;
  }
  .el-pagination {
    .el-pagination__total,
    .el-pagination__jump,
    button,
    .number,
    .more {
      background: transparent;
      color: #fff;
    }
    .is-active.number {
      color: #fff;
    }
  }
  .el-dialog__title {
    color: #fff;
  }
  .el-dialog {
    background: rgba(55, 69, 96, 1);
    color: #fff;
    box-shadow: 1px 1px 5px rgba(55, 69, 96, 1);
    .el-input__wrapper {
      background: transparent;
    }
  }
  .el-time-spinner__wrapper .el-time-spinner__arrow{
    color: var(--el-text-color-secondary) !important;
  }
  .el-notification .el-notification__closeBtn{
    color: var(--el-notification-close-color) !important;
  }
  div:not(.el-message) {
    .el-icon {
      color: #fff;
    }
    .el-tree-node__expand-icon.is-leaf {
      color: transparent;
    }
  }
  .el-dialog__close {
    color: #fff;
  }
  .el-descriptions__body {
    background: rgba(55, 69, 96, 0.9);
    color: #fff;
  }
  .el-descriptions__body
    .el-descriptions__table.is-bordered
    .el-descriptions__cell {
    border: none;
  }
  .el-descriptions__label.el-descriptions__cell.is-bordered-label {
    background: rgba(55, 69, 96, 0.9);
    color: #fff;
  }
  .el-descriptions__content.el-descriptions__cell.is-bordered-content {
    color: #fff;
  }
  .el-radio-button__inner {
    background: rgb(182 187 197 / 30%);
    border: 1px solid rgba(182, 187, 197, 0.3);
    color: #fff;
  }
  .is-active .el-radio-button__inner{
    color: #fff;
    text-shadow: 0px 0px 9px #fff;
  }
  .el-radio-button__inner:hover {
    color: #fff;
  }
  .el-radio-button:first-child .el-radio-button__inner {
    border-left: none;
  }
  textarea {
    background: rgba($color: #000000, $alpha: 0);
    color: #fff;
  }
  .el-form-item__label {
    color: #fff;
  }
  .el-input-group__append {
    background: rgba(55, 69, 96, 0.9);
    border: none;
    box-shadow: none;
  }
  .el-date-table td.in-range .el-date-table-cell {
    background: #333;
  }
  .el-picker-panel__footer {
    background: #374560;
  }
  .el-picker-panel__sidebar {
    background: #374560;
  }
  .el-picker-panel__shortcut {
    color: #fff;
  }
  .el-date-editor .el-range-input {
    color: #fff;
  }
}
